<template>
	<view class="main">
		<view class="list_box" v-for="v in dataList.list" :key="v.hosId">
			<view class="list_content">
				<view class="pic">
					<!-- <u--image :showLoading="true" :srcv.="log_pic" shape="circle" width="45px" height="45px"></u--image> -->
					<u-avatar :src="v.logo" size="45" shape="circle" :default-url="log_pic"></u-avatar>
				</view>
				<view class="list">
					<view class="title">{{v.platHosName}}</view>
					<view class="hosp_type">
						<span class="type">{{v.hosLevelDesc}}</span>
						<span>{{v.hosTypeDesc}}</span>
					</view>
					<view class="address">
						<view class="localtion"><u--image :showLoading="true" :src="location" width="24rpx"
								height="28rpx"></u--image></view>
						<view class="adress_title">
							{{depDot(v.address,12)}}

						</view>
						<view class="far" v-if="v.distance">{{v.distance}} km</view>
					</view>
					<view class="dep" v-for="value in twoList(v.deptList)" :key="value.showDeptId">
						<view class="dep_box" @click="goDetails(value.showDeptId,v.deptList)">
							<view class="dep_left_box">
								<view class="dep_left">
									{{value.showDeptName}}
								</view>
								<view class="dep_center" v-if="value.label.length > 0">
									{{value.label[0]}}
								</view>
							</view>
							<view class="dep_arrow">
								<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
							</view>
						</view>
						<u-divider></u-divider>
					</view>
				</view>
			</view>
			<view class="more_list" v-if="v.deptList.length > 2" @click="goDetails(0,v.deptList)">
				查看更多({{v.deptList.length}}个)
			</view>
		</view>
		<view style="padding-bottom: 180rpx;">
			<u-loadmore :status="pageStatus" v-if="!isList" />
		</view>
		<!-- <u-empty mode="data" iconSize="140" textSize="18"></u-empty> -->
		<view class="empty" v-if="showEmp && isList">
			<u-empty mode="data" iconSize="140" textSize="18" :icon="emptyList" :text="emptyData"></u-empty>
		</view>
		<u-picker :show="show" :columns="columns" @confirm="selectDep" @cancel="cancel"
			keyName="showDeptName"></u-picker>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		name: "dep-list",
		data() {
			return {
				location: require('@/static/icons/location.png'),
				log_pic: require('@/static/icons/defalut_hosp.png'),
				emptyList: require('@/static/icons/empty_list.png'), //空列表
				docSrc: '',
				showEmp: false,
				isList: false,
				show: false,
				columns: [],
				// columns: [
				// 	['中国', '美国', '菲律宾', '泰国']
				// ],
			};
		},
		methods: {
			goDetails(ids, list) {
				if (ids == 0) {
					this.columns = [] //清空
					let arr = []
					list.map(v => {
						arr.push({
							'showDeptId': v.showDeptId,
							'showDeptName': v.showDeptName
						})
					})
					this.columns = [arr]
					this.show = true //这个要放这里
					return
				}
				uni.navigateTo({
					url: `/pages/sousuo/search_dep_details/index?departmentId=${ids}`
				})

			},
			selectDep(e) {
				//console.log('confirm', e.value[0])
				this.show = false
				this.columns = []
				uni.navigateTo({
					url: `/pages/sousuo/search_dep_details/index?departmentId=${e.value[0].showDeptId}`
				})
			},
			cancel() {
				this.columns = []
				this.show = false
			},
			...mapMutations(['ALLRESET']),
		},
		computed: {
			dataList() {
				//console.log(this.$store.state.doc.deptList);
				if (this.$store.state.doc.deptList?.total > 0 && this.$store.state.doc.deptList?.total !== undefined) {
					this.isList = false
				} else {
					this.isList = true
				}
				//console.log(this.$store.state.doc.deptList, this.isList, 'deptList')
				return this.$store.state.doc.deptList
			},
			pageStatus() {
				return this.$store.state.doc.pageStatus
			},
			isCount() {
				//console.log(this.$store.state.doc.totalCount < 5);
				if (this.$store.state.doc.totalCount < 5) {
					return false
				} else {
					return true
				}
			},
			depDot() {
				return (value, number) => {
					if (value && value.length > number) {
						let res = ''
						res = value.slice(0, number) + '...'
						return res
					}
					return value
				}
			},
			twoList() {
				return (arr) => {
					if (arr.length > 0) {
						return arr.slice(0, 2)
					}
					return arr
				}
			}
		},
		watch: {
			'$store.state.doc.frozen': {
				handler(ne, ol) {
					this.showEmp = ne
				},
				immediate: true
			}
		},
		mounted() {
			this.ALLRESET()
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #F5F6F8;

		//padding-top: 30rpx;
		.list_box {
			padding-top: 30rpx;
			background-color: #fff;
			margin: 0 30rpx 30rpx 30rpx;
			border-radius: 10px;

			.list_content {
				display: flex;
				justify-content: space-between;

				.pic {
					margin: 0 10rpx 0 30rpx;
				}

				.list {
					display: flex;
					flex-direction: column;
					width: 100%;

					.title {
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
						line-height: 40rpx;
					}

					.hosp_type {
						height: 32rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						line-height: 32rpx;
						margin: 8rpx 0 14rpx 0;

						.type {
							margin-right: 10rpx;
							padding: 6rpx 8rpx;
							text-align: center;
							background: #FBF1EF;
							border-radius: 4rpx;
							border: 2rpx solid #E16740;
							font-size: 20rpx;
							font-weight: 400;
							color: #E16740;
							line-height: 24rpx;
						}
					}

					.address {
						display: flex;
						flex-direction: row;
						//flex-wrap: wrap;
						align-items: center;
						margin-top: 10rpx;

						.localtion {
							margin-right: 10rpx;
							flex-shrink: 0;
						}

						.adress_title {
							font-size: 26rpx;
							font-weight: 400;
							width: 350rpx;
							color: #999999;
							line-height: 32rpx;
							margin: 6rpx 0;
							flex: 1
						}

						.far {
							font-size: 22rpx;
							font-weight: 400;
							//width: 100rpx;
							color: #333333;
							line-height: 24rpx;
							margin-right: 15rpx;
							margin-left: 15rpx;
							flex-shrink: 0;
						}
					}

					.dep {
						margin-top: 16rpx;

						.dep_box {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.dep_left_box {
								display: flex;
								align-items: center;

								.dep_left {
									font-size: 24rpx;
									font-weight: 400;
									color: #333333;
									line-height: 34rpx;
									flex-shrink: 0;

								}

								.dep_center {
									font-size: 20rpx;
									font-weight: 400;
									color: #3F80FF;
									line-height: 32rpx;
									padding: 2rpx 12rpx;
									margin-left: 12rpx;
									//width: 140rpx;
									background-color: #EAEFFF;
									flex-shrink: 0;
								}
							}

							.dep_arrow {
								margin-right: 30rpx;
							}
						}

					}

				}

			}

			.more_list {
				color: #333333;
				font-size: 24rpx;
				text-align: center;
				padding-bottom: 40rpx;
			}
		}

		.empty {
			padding-top: 100rpx;
			padding-bottom: 200rpx;
		}

		// .list_box::after{
		// 	content: '';
		// 	top: 0;
		// 	left: 0;
		// 	transform: translate(5%,-70%);
		// 	width: 50px;
		// 	height: 20px;
		// 	background: #D9FEFF;
		// 	border-radius: 0px 10px 0px 10px;
		// }
	}
</style>